
<html>
<head>
    <meta charset="UTF-8">
    <title>hivue</title>
    <link rel="stylesheet" href="styles/demo.css">
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th colspan="3">父组件数据</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{ name }}</td>
            <td><input type="text" v-model="name" /></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ age }}</td>
            <td><input type="text" v-model="age" /></td>
        </tr>
    </table>
    <my-girl v-bind:my-name="name" v-bind:my-age.sync="age"></my-girl>
</div>
<template id="myGirl">
    <table>
        <tr>
            <th colspan="3">
                子组件数据
            </th>
        </tr>
        <tr>
            <td>my name</td>
            <td>{{ myName }}</td>
            <td><input type="text" v-model="myName" /></td>
        </tr>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{ myAge }}</td>
            <td><input type="text" v-model="myAge" /></td>
        </tr>
        </tr>
    </table>
</template>
<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el: '#app',
        data:{
            name:'李冰冰',
            age:38,
            price:6699
        },
        components:{
            'my-girl':{
                template:'#myGirl',
                props:['myName','myAge']
            }
        }
    })
</script>
</body>
</html>
